<template>
  <div>
    <bread-crumb-view :breadList="breadList"></bread-crumb-view>
    <el-card shadow="always">
      <div style="margin-top: 20px">
        系统组件视觉大小
        <el-radio-group v-model="list.radio2" :size="size">
          <el-radio-button label="medium"></el-radio-button>
          <el-radio-button label="small"></el-radio-button>
          <el-radio-button label="mini"></el-radio-button>
        </el-radio-group>
      </div>
      <div>
        收起导航菜单
        <el-switch
          v-model="list.value"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </div>
      <div>
        主页显示疫情地图
        <el-switch
          v-model="list.ditu"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </div>
      <el-button type="primary" @click="changes" :size="size"
        >保存并应用</el-button
      >
    </el-card>
  </div>
</template>

<script>
import BreadCrumbView from "../../components/BreadCrumbView.vue";
export default {
  components: { BreadCrumbView },
  name: "SetTings",

  data() {
    return {
      breadList: ["系统设置"],

      list: {
        value: true,
        ditu: true,
        radio2: "medium",
      },
      size: "mini",
    };
  },
  methods: {
    changes() {
      this.$bus.$emit("change", this.list);
      this.size = this.list.radio2;
      if (this.list.ditu) {
        this.$router.push("/welcome");
      }
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
:deep(.el-card) {
  margin: 20px auto;
  .el-card__body {
    padding: 0 16px;
  }
  div {
    margin: 10px 0;
  }
}
</style>


